<template>
  <div class="point_map">
    <baidu-map
      class="map"
      ak="ydQSqxFvhi32yEHGTo8rEqxpvfBMvE85"
      :center="'中国'"
      :zoom="5"
      :scroll-wheel-zoom="true"
      @ready="handler"
    >
      <bml-marker-clusterer :averageCenter="true">
        <bm-marker
          v-for="(item, index) in markers"
          :key="index"
          :position="{lng: item.lng, lat: item.lat}"
          :dragging="true"
          animation="BMAP_ANIMATION_BOUNCE"
        ></bm-marker>
      </bml-marker-clusterer>
    </baidu-map>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { BaiduMap, BmMarker, BmlMarkerClusterer } from "vue-baidu-map-3x";
const center = ref({ lng: 0, lat: 0 });
const zoom = ref(4);
const markers = reactive([])

onMounted(() => {
  for (let i = 0; i < 20; i++) {
    const position = {
      lng: Math.random() * 40 + 85,
      lat: Math.random() * 30 + 21,
    };
    markers.push(position);
  }
})

const handler = ({ BMap, map }) => {
  console.log(BMap, map);
  center.value.lng = 116.404;
  center.value.lat = 39.915;
  zoom.value = 15;
}

</script>

<style lang="scss" scoped>
.point_map {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.map {
  width: 100%;
  height: 100%;
}
</style>